<template>
  <div class="comp4g1Container">
    <div class="comp4g1Card" v-for="(option, index) in options" :key="index">
      <card_e :image-url="option.image"></card_e>
    </div>
  </div>
</template>

<script setup lang="ts">
import { i18nt } from "@/i18n";
import card_e from "@/components/cards/card_e.vue";

const msg = i18nt.value.constantsOne.SuperM;

const options = [
  {
    image: new URL("@/assets/png/smg1/gp1.png", import.meta.url).href,
    title: msg.testcardTitle,
    sub: msg.testStr,
  },
  {
    image: new URL("@/assets/png/smg1/gp2.png", import.meta.url).href,
    title: msg.testcardTitle,
    sub: msg.testStr,
  },
  {
    image: new URL("@/assets/png/smg1/gp3.png", import.meta.url).href,
    title: msg.testcardTitle,
    sub: msg.testStr,
  },
  {
    image: new URL("@/assets/png/smg1/gp4.png", import.meta.url).href,
    title: msg.testcardTitle,
    sub: msg.testStr,
  },
];
</script>

<style scoped lang="scss">
.comp4g1Container {
  @include rel_cen_hw(358px, 100%);
  flex-direction: row;
  justify-content: space-between;
  .comp4g1Card {
    @include rel_cen_hw(358px, 355px);

    // background: red;
  }
}
</style>
